<template>
  <div class="app-container">
    <div style="display: flex;flex-direction:row-reverse;margin-bottom: 10px;height: 30px;" id="home-tab">
      <div style="  position:fixed;top:105px;z-index: 1000;">
        <el-button
          style="margin-left: 20px"
          type="info"
          @click="handleBack"
          size="mini"
        >返回
        </el-button>
        <el-button
          type="primary"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:order:add']"
        >保存
        </el-button>
      </div>
    </div>
    <div style="width: 100%;height: 1px;border: 1px solid #d3d4d6;margin: 0px  10px"></div>
    <div style="display: flex;margin-bottom: 10px;align-items: center">

      <!--      <div style="width: 100%;height: 1px;border: 1px solid #d3d4d6;margin: 0px  10px"></div>-->
    </div>
    <!--    主表信息-->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" :rules="rules" label-width="100px">
      <el-form-item label="仓库名称" prop="warehouseName">
        <el-select
          v-model="queryParams.warehouseName"
          placeholder="请选择仓库名称"
          clearable
          @keyup.enter.native="handleQuery"
        >
          <el-option v-for="item in warehouseList" :key="item.warehouseId" :label="item.warehouseName"
                     :value="item.warehouseName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提单号" prop="billNo">
        <el-input
          v-model=" queryParams.billNo"
          placeholder="请输入提单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="目的地" prop="destination">
        <el-input
          v-model=" queryParams.destination"
          placeholder="请输入目的地"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="订单类型" prop="type">
        <el-select v-model="queryParams.type" placeholder="请输入订单状态" clearable>
          <el-option
            v-for="dict in dict.type.sys_order_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="货品类型" prop="goodsType">
        <el-select v-model="queryParams.goodsType" placeholder="请输入订单状态" clearable>
          <el-option
            v-for="dict in dict.type.sys_order_goods_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="运输类型" prop="transportType">
        <el-input
          v-model=" queryParams.transportType"
          placeholder="请输入运输类型"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="船名/航次" prop="voyage">
        <el-input
          v-model=" queryParams.voyage"
          placeholder="请输入船名/航次"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="船公司" prop="shippingCompany">
        <el-input
          v-model=" queryParams.shippingCompany"
          placeholder="请输入船公司"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="车辆数量" prop="vehicleNum">
        <el-input
          v-model=" queryParams.vehicleNum"
          placeholder="请输入车辆数量"
          clearable
          @input="value=>queryParams.vehicleNum=Number(value.replace(/^(0+)|[^\d]+/g,''))"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="集装箱数量" prop="containerNum">
        <el-input
          @input="value=>queryParams.containerNum=Number(value.replace(/^(0+)|[^\d]+/g,''))"
          v-model=" queryParams.containerNum"
          placeholder="请输入集装箱数量"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="预计离开时间" prop="expectedLeaveDate">
        <el-date-picker clearable
                        style="width: 205px"
                        v-model=" queryParams.expectedLeaveDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择预计离开时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="预计装箱时间" prop="expectedPackingDate">
        <el-date-picker clearable
                        style="width: 205px"
                        v-model=" queryParams.expectedPackingDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择预计装箱时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="实际装箱时间" prop="actualPackingDate">
        <el-date-picker clearable
                        style="width: 205px"
                        v-model=" queryParams.actualPackingDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择实际装箱时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="实际进港时间" prop="actualArrivalDate">
        <el-date-picker clearable
                        style="width: 205px"
                        v-model=" queryParams.actualArrivalDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择实际进港时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入备注"
          v-model=" queryParams.remark"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <div style="display: flex;margin-bottom: 10px;align-items: center">
      <div style="width: 60px;font-weight: bold">集装箱</div>
      <div style="width: 100%;height: 1px;border: 1px solid #d3d4d6;margin: 0px  10px"></div>
    </div>
    <!--    集装箱-->
    <el-table
      :data="containerNum"
      size="mini"
      border
      highlight-current-row
      :header-cell-style="{background:'#f1f1f1'}"
    >
      <el-table-column label="集装箱号" align="center">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.containerCode"
            placeholder="请输入集装箱号"
            clearable
          />
        </template>
      </el-table-column>
      <el-table-column label="铅封号" align="center">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.sealNumber"
            placeholder="请输入铅封号"
            clearable
          />
        </template>
      </el-table-column>
      <el-table-column label="箱皮重" align="center">
        <template slot-scope="scope">
          <el-input
            @input="value=>scope.row.tareWeight=Number(value.replace(/^(0+)|[^\d]+/g,''))"
            v-model=" scope.row.tareWeight"
            placeholder="请输入箱皮重"
            clearable
          />
        </template>
      </el-table-column>
      <el-table-column label="箱型" align="center">
        <template slot-scope="scope">
            <el-select v-model="scope.row.containerType" placeholder="请输入箱型" clearable>
              <el-option
                v-for="dict in dict.type.sys_order_container_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
        </template>
      </el-table-column>
      <el-table-column label="总体积" align="center">
        <template slot-scope="scope">
          <el-input
            @input="value=>scope.row.totalVolume=Number(value.replace(/^(0+)|[^\d]+/g,''))"
            v-model="scope.row.totalVolume"
            placeholder="请输入总体积"
            clearable
          />
        </template>
      </el-table-column>
      <el-table-column label="总质量" align="center">
        <template slot-scope="scope">
          <el-input
            @input="value=>scope.row.totalMass=Number(value.replace(/^(0+)|[^\d]+/g,''))"
            v-model=" scope.row.totalMass"
            placeholder="总质量"
            clearable
          />
        </template>
      </el-table-column>
      <el-table-column label="件数" align="center">
        <template slot-scope="scope">
          <el-input
            @input="value=>scope.row.objectNumber=Number(value.replace(/^(0+)|[^\d]+/g,''))"
            v-model=" scope.row.objectNumber"
            placeholder="请输入件数"
            clearable
          />
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center">
        <template slot-scope="scope">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入备注"
            v-model=" scope.row.remark"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <span class="spanBtn" @click="containerDelete(scope.$index)" style="color: #00afff">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="add-table" @click="addContainer()" style="margin-bottom: 20px">添加</div>
    <div style="display: flex;margin-bottom: 10px;align-items: center">
      <div style="width: 43px;font-weight: bold">车辆</div>
      <div style="width: 100%;height: 1px;border: 1px solid #d3d4d6;margin: 0px  10px"></div>
    </div>
    <!--    车辆-->
    <el-table
      :data="vehicleNum"
      size="mini"
      border
      highlight-current-row
      style="width: 100%"
      :header-cell-style="{background:'#f1f1f1'}"
    >
      <el-table-column label="vin码"  align="center">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入vin码"
            v-model="scope.row.vehicleVin"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="集装箱号"   align="center">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.containerCode"
            placeholder="请输入集装箱号"
            clearable
          />
        </template>
      </el-table-column>
      <el-table-column label="品牌" align="center">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入品牌"
            v-model="scope.row.brandName"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="颜色名称" align="center">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入颜色名称"
            v-model="scope.row.colorName"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_order_vehicle_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <span class="spanBtn" @click="vehicleDelete(scope.$index)" style="color: #00afff">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="add-table" @click="addVehicle" style="margin-bottom: 20px">添加</div>
    <div style="display: flex;margin-bottom: 10px;align-items: center">
      <div style="width: 43px;font-weight: bold">附件</div>
      <div style="width: 100%;height: 1px;border: 1px solid #d3d4d6;margin: 0px  10px"></div>
    </div>
    <el-form :model="attachments" ref="queryForm" size="small" :inline="true" label-width="100px">
      <el-form-item label="上传附件" prop="fileUrl">
        <!--上传-->
        <el-upload
          ref="uploadUrl"
          class="upload-demo"
          action="#"
          :auto-upload="false"
          :multiple="false"
          :on-change="handleChange"
          :file-list="fileList"
          :on-remove="handleRemove"
        >
          <el-button size="small" type="primary" icon="el-icon-plus">上传</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { listOrder, getOrder, delOrder, addOrder, updateOrder } from '@/api/system/order/order'
import { singleUpload } from '@/api/system/upload'
import { listWarehouse, allWarehouse } from '@/api/system/warehouse'

export default {
  name: 'Order',
  dicts: ['sys_order_type', 'sys_order_vehicle_status', 'sys_order_goods_type','sys_order_container_type'],
  data() {
    return {
      rules: {
        warehouseName: [{ required: true, trigger: 'blur', message: '仓库名称不能为空' }],
        billNo: [{ required: true, trigger: 'blur', message: '提单号不能为空' }],
        type: [{ required: true, trigger: 'blur', message: '订单类型不能为空' }],
        vehicleNum: [{ required: true, trigger: 'blur', message: '车辆数量不能为空' }],
        containerNum: [{ required: true, trigger: 'blur', message: '集装箱数量不能为空' }]
      },
      containerNum: [{
        containerCode: null,
        objectNumber: null,
        remark: null,
        tareWeight: null,
        totalMass: null,
        totalVolume: null,
        sealNumber: null,
        containerType:null
      }],
      vehicleNum: [{
        vehicleVin: '',
        colorName: '',
        brandName: '',
        status: ''
      }],
      orderId: '',
      containers: {},
      vehicles: {},
      attachments: {},
      fileList: [],
      typeList: ['非商单', '电子单'],
      warehouseList: [],//所有仓库
      queryParams: {
        goodsType: null,
        warehouseName: null,
        billNo: null,
        type: null,
        destination: null,
        voyage: null,
        shippingCompany: null,
        transportType: null,
        vehicleNum: null,
        containerNum: null,
        expectedLeaveDate: null,
        expectedPackingDate: null,
        actualPackingDate: null,
        actualArrivalDate: null,
        remark: null,
        containers: [],
        vehicles: [],
        attachments: []
      }
    }
  },
  created() {
    this.getWarehouseList()
    this.orderId = this.$route.query && this.$route.query.orderId;
    this.getqueryOrder(this.orderId)
  },
  watch: {
    $route:{
      handler(n){
        this.getWarehouseList()
        this.orderId = this.$route.query && this.$route.query.orderId;
        this.getqueryOrder(this.orderId)
        // 初始化操作，这里边的操作可以把created钩子中的操作复制到这里一份。
      },
      immediate: true,
      deep: true,
    }
  },
  methods: {
    //新增集装箱
    addContainer() {
      this.containerNum.push({
        containerCode: null,
        objectNumber: null,
        remark: null,
        tareWeight: null,
        totalMass: null,
        totalVolume: null,
        sealNumber: null,
        containerType:null
      })
    },
    //删除集装箱
    containerDelete(index) {
      this.containerNum.splice(index, 1)
    },
    //新增列 操作
    addVehicle() {
      this.vehicleNum.push(
        {
          vehicleVin: '',
          colorName: '',
          brandName: ''
        }
      )
    },
    vehicleDelete(index) {
      this.vehicleNum.splice(index, 1)
    },
    // 编辑进去页面的数据展示
    getqueryOrder(orderId) {
      if (orderId) {
        getOrder(orderId).then(response => {
          this.queryParams = response.data
          this.queryParams.containers=response.data.containers
          this.queryParams.vehicles=response.data.vehicles
          this.containerNum = response.data.containers
          this.vehicleNum = response.data.vehicles
          this.fileList =[]
          response.data.attachments.map(item => {
            //展示出来的列表是name字段
            this.fileList.push({ name: item.originalFileName })
          })
        })
      }else {
        this.queryParams = {}
        // this.queryParams.containers=response.data.containers
        // this.queryParams.vehicles=response.data.vehicles
        this.containerNum = [{}]
        this.vehicleNum = [{}]
        this.fileList =[]
      }
    },
    handleBack() {
      this.$router.push('/system/order/order');
    },
//    获取仓库数据
    getWarehouseList() {
      allWarehouse({}).then((res) => {
        this.warehouseList = res.data
      })
    },
    //选中文件，上传文件
    handleChange(file, fileList) {
      let fileData = new FormData()
      // 追加的是上传文件的详细信息raw
      fileData.append('file', file.raw)
      singleUpload(fileData).then((res) => {
        this.queryParams.attachments.push({ fileUrl: res.fileName, originalFileName: res.originalFilename })
      })
    },
    //删除  选中文件
    handleRemove(file, fileList) {
      this.queryParams.attachments.map((item, index) => {
        if (file.name === item.originalFileName) {
          this.queryParams.attachments.splice(index, 1)
        }
      })
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.queryParams.vehicles = this.vehicleNum
      this.queryParams.containers = this.containerNum
      this.$refs['queryForm'].validate(valid => {
        if (valid) {
          if (this.orderId != null) {
            updateOrder(this.queryParams).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.handleBack()
            })
          } else {
            addOrder(this.queryParams).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.handleBack()
            })
          }
        }
      })
    }
  }
}
</script>
<style>

.el-form-item__label {
  font-weight: normal;
}

.isFixed {
  position: fixed;
  top: 5px;
  z-index: 1000;
}

.add-table {
  width: 100%;
  height: 30px;
  border: 1px solid #dfe6ec;
  text-align: center;
  line-height: 30px;
  color: #00afff;
}
</style>
